<template>
  <div>这是{{msg1}}{{msg}}</div>
  <div class="test">森林</div>
  <div>
    <el-button type="primary" @click="onTochild(1)" size="small">主要按钮</el-button>
  </div>
  <com-test :msg="msg"></com-test>
</template>

<script lang="ts">
  import {provide, reactive, ref, toRefs} from "vue";
  import comTest from "../components/comTest.vue";

  export default {
    components: {
      comTest
    },
    setup() {
      const state = reactive({
        active: 1230,
        msg: `这是内容22`
      });
      provide("tochildMsg", "我是父组件向子组件传递的值");
      const msg1 = ref('Hello world');

      const onTochild = (type: number) => {
        alert(type)
        state.msg = 'abc';
        provide("tochildMsg", "我是父组件向子组件传递的值222222222");
      }
      return {
        msg1,
        ...toRefs(state),
        onTochild
      }
    }
  }
</script>

<style scoped lang="scss">
  $red: '#ff0000';
  .test {
    width: 300px;
    height: 200px;
    border: 1px solid #{red};
  }
</style>
